<template>
    <div class="mod-user">
        <avue-crud :data="dataList"
                   :option="tableOption"
                   :page="page"
                   @on-load="getDataList"
                   @search-change="searchChange"
                   @selection-change="selectionChange"
                   ref="crud">
            <template slot="menuLeft">
                <el-button @click.stop="addOrUpdateHandle()"
                           icon="el-icon-plus"
                           size="small"
                           type="primary"
                           v-if="isAuth('sys:user:save')">新增
                </el-button>

                <el-button :disabled="dataListSelections.length <= 0"
                           @click="deleteHandle()"
                           size="small"
                           type="danger"
                           v-if="isAuth('sys:user:delete')">批量删除
                </el-button>
            </template>
            <template slot="menu"
                      slot-scope="scope">
                <el-button @click.stop="addOrUpdateHandle(scope.row.userId)"
                           icon="el-icon-edit"
                           size="small"
                           type="primary"
                           v-if="isAuth('sys:user:update')">编辑
                </el-button>

                <el-button @click.stop="deleteHandle(scope.row.userId)"
                           icon="el-icon-delete"
                           size="small"
                           type="danger"
                           v-if="isAuth('sys:user:delete')">删除
                </el-button>
            </template>
        </avue-crud>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="getDataList"
                       ref="addOrUpdate"
                       v-if="addOrUpdateVisible"></add-or-update>
    </div>
</template>

<script>
    import {tableOption} from '@/crud/sys/user'
    import AddOrUpdate from './user-add-or-update'

    export default {
        data() {
            return {
                dataList: [],
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                tableOption: tableOption,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                }
            }
        },
        components: {
            AddOrUpdate
        },
        methods: {
            // 获取数据列表
            getDataList(page, params, done) {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/sys/user/page'),
                    method: 'get',
                    params: this.$http.adornParams(
                        Object.assign(
                            {
                                current: page == null ? this.page.currentPage : page.currentPage,
                                size: page == null ? this.page.pageSize : page.pageSize
                            },
                            params
                        )
                    )
                }).then(({data}) => {
                    this.dataList = data.records
                    this.page.total = data.total
                    this.dataListLoading = false
                    if (done) {
                        done()
                    }
                })
            },
            // 条件查询
            searchChange(params, done) {
                this.getDataList(this.page, params, done)
            },
            // 多选变化
            selectionChange(val) {
                this.dataListSelections = val
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                var userIds = id ? [id] : this.dataListSelections.map(item => {
                    return item.userId
                })
                this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/sys/user'),
                        method: 'delete',
                        data: this.$http.adornData(userIds, false)
                    }).then(({data}) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    })
                }).catch(() => {
                })
            }
        }
    }
</script>
